/*
 * @Author: luojian jian.luo@macrowing.com
 * @Date: 2024-05-15 11:10:11
 * @LastEditors: luojian jian.luo@macrowing.com
 * @LastEditTime: 2024-05-24 15:50:19
 * @FilePath: \JiangHeBiWeb\src\pages\jhDataCenter\style.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import styled from 'styled-components';
import bg from '@/assets/images/bg-1.png';
import topbg from '@/assets/jhdata/topbg.svg';
import mapbg from '@/assets/jhdata/mapbg.svg';

export const HlDataCenterStyled = styled.div`
  background-color: #011443;
  @media screen and (width: 2560px) {
    height: 100vh;
  }
  .top {
    height: 10vh;
    display: flex;
    justify-content: center;
    background-image: url(${topbg}) !important;
    background-size: 100%; 
    background-repeat: no-repeat;
    .top-left {
      flex: 2;
      margin-bottom: 20px;
      .text {
        font-weight: 500;
        font-size: 18px;
        color: #66ffff;
        line-height: 80px;
        text-align: left;
        padding-left: 1vw;
        text-transform: none;
        .time {
          display: inline-block;
          width: 28%;
          @media screen and (width: 2560px) {
            width: 30%;
          }
        }
        @media screen and (width: 2560px) {
          font-size: 26px;
        }
      }
    }

    .title {
      flex: 1;
      text-align: center;
      color: #fff;
      text-shadow: 2px 3px 1px #0861b0;
      font-weight: 700;
      letter-spacing: 0.6rem;
      white-space: nowrap;
      .title-name {
        font-size: 34px;
        line-height: 90px;
        @media screen and (width: 2560px) {
          font-size: 46px;
        }
      }
    }

    .top-right {
      flex: 2;
      margin-bottom:20px;
      .text {
        font-weight: 500;
        font-size: 18px;
        color: rgb(102, 255, 255);
        line-height: 80px;
        padding-right: 1vw;
        text-transform: none;
        text-align: right;
      }
      .fullscreen {
        color: #fff;
        text-align: right;
        margin: 12px;
        @media screen and (width: 2560px) {
          margin: 20px;
        }
        img{
          width: 22px;
          @media screen and (width: 2560px) {
            width: 32px;
          }
        }
      }
    }
  }

  .middle {
    height: 85vh;
    width: 100%;
    background-image: url(${mapbg}) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    @media screen and (width: 2560px) {
      height: 85vh;
    }
  }

  .bottom {
    width: 100%;
    height: 5vh;
    img {
      display: block;
      margin: 0 auto;
      height: 100%;
      width: 100%;
    }
  }
`;
